import React, { useState } from 'react';
import { Form, Input, Button, Card, Select } from 'antd';
import { register, login } from '../api/user';
import { toast } from 'react-toastify';
import './Register.jd.css';

const Register = ({ onGoLogin }) => {
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();

  // 密码强度校验
  const validatePassword = (_, value) => {
    if (!value) return Promise.reject('请输入密码');
    if (value.length < 8) return Promise.reject('密码长度至少8位');
    if (!/[A-Za-z]/.test(value) || !/\d/.test(value)) return Promise.reject('密码需包含字母和数字');
    return Promise.resolve();
  };

  // 注册并自动登录
  const handleFinish = async (values) => {
    setLoading(true);
    const submitValues = { ...values, real_name: values.nickname.trim() };
    try {
      const data = await register(submitValues);
      if (data.success || data.code === 0 || data.code === 200) {
        toast.success('注册成功，请登录');
        onGoLogin(); // 注册成功后直接跳转登录
      } else {
        toast.error(data.message || data.msg || '注册失败');
      }
    } catch (e) {
      toast.error('网络异常，注册失败');
    }
    setLoading(false);
  };

  return (
    <div className="jd-register-bg">
      <div className="jd-register-container">
        <div className="jd-register-header">
          {/* <img src="https://img10.360buyimg.com/img/jfs/jfs/t1/112776/2/20613/1232/61b6e2e2E1e1e1e1e/1e1e1e1e1e1e1e1e.png" alt="京东logo" className="jd-logo" /> */}
          <span className="jd-title">注册</span>
        </div>
        <div className="jd-register-card">
          <div className="jd-register-card-title">账号注册</div>
          <Form layout="vertical" onFinish={handleFinish} form={form} className="jd-form">
            <Form.Item label="用户名" name="username" rules={[{ required: true, message: '请输入用户名' }]}> 
              <Input autoFocus className="jd-input"/>
            </Form.Item>
            <Form.Item
              label="昵称"
              name="nickname"
              rules={[
                {
                  validator: (_, value) => {
                    const v = (value || '').trim();
                    if (!v) return Promise.reject('请输入有效昵称（不能全为空格）');
                    if (v.length < 2 || v.length > 16) return Promise.reject('昵称长度2-16位');
                    if (!/^[\u4e00-\u9fa5a-zA-Z0-9_ ]+$/.test(v)) return Promise.reject('昵称仅支持中英文、数字、下划线和空格');
                    return Promise.resolve();
                  }
                }
              ]}
            >
              <Input maxLength={16} showCount allowClear className="jd-input"/>
            </Form.Item>
            <Form.Item label="手机号" name="phone" rules={[
              { required: true, message: '请输入手机号' },
              { pattern: /^1\d{10}$/, message: '手机号格式不正确' }
            ]}>
              <Input className="jd-input"/>
            </Form.Item>
            <Form.Item label="密码" name="password" rules={[{ required: true, validator: validatePassword }]} validateTrigger={["onBlur"]}>
              <Input.Password className="jd-input"/>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" block loading={loading} className="jd-btn">注册</Button>
            </Form.Item>
          </Form>
          <div className="jd-register-footer">
            已有账号？ <a onClick={onGoLogin} className="jd-link">去登录</a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Register; 